<template>
  <div class="box">
    <div class="dashboardContainer">
      <div>
        <b style="margin-left: 4px; font-size: 25px;">收费概览</b>
        <Slider></Slider>
      </div>
      <Card></Card>
      <ChartLint__top></ChartLint__top>
      <ChartLint__right></ChartLint__right>
      <ChartLint__bottom__left></ChartLint__bottom__left>
      <ChartLint__bottom__right></ChartLint__bottom__right>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Card from "@/components/card"
import Slider from "@/components/Slider"
import ChartLint__top from '@/components/chartLint/chartLint__top'
import ChartLint__right from '@/components/chartLint/chartLint__right'
import ChartLint__bottom__left from '@/components/chartLint/chartLint__bottom__left'
import ChartLint__bottom__right from '@/components/chartLint/chartLint__bottom__right'

export default {
  name: 'Dashboard',
  data() {
    return {
      value: true,
    }
  },
  components: {
    Card,
    Slider,
    ChartLint__top,
    ChartLint__right,
    ChartLint__bottom__left,
    ChartLint__bottom__right
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style>
body {
  background-color: aliceblue;
}

.box {
  height: 100%;
  margin: 5px 25px 0 25px;
  font-size: 20px;
  line-height: 46px;
}
</style>
